<template>
  <div>

    <myheader :img_src='img '/>

    用户中心<br/>
    用户名:{{ user.username }}<br/>
    手机号:{{ user.mobile | mobilefilter }}<br/>
    头像<br/>
    <van-image
      round
      width="20rem"
      height="20rem"
      :src="img"
    />
    上传头像：
    <van-uploader :after-read="afterRead"/>
    多文件上传：<van-uploader v-model ="filelist" multiple :max-count="4" :after-read="uploadmul"/>
    <button @click="goto">所有文件</button>
  </div>
</template>

<script>
import myheader from "../myheader";

export default {
  data() {
    return {
      user: {},
      userid: localStorage.getItem("userid"),
      img: '',
      filelist:[]
    };
  },
  filters: {
    mobilefilter(value) {
      //把手机号给隐藏
      if (value) {
        return value.slice(0, 3) + "******" + value.slice(-3, -1);
      }

    },
  },
  methods: {
    //多文件
    uploadmul(){
      for (var i=0;i<this.filelist.length;i++){
        var file = this.filelist[i]
        this.afterRead(file                                                                                                                                                                                                                                                                                                                                                                                                                            )
      }
    },
    get_info() {
      //根据用户id查用户信息
      this.$axios.get("/users/get_info?userid=" + this.userid).then((res) => {
        this.user = res.data.user
        this.img = 'http://localhost:5000/static/upload/' + this.userid + '/' + res.data.user.avater
        ;
      });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //传文件 重新构造一个data
      let data = new FormData()
      data.append('file', file.file)
      data.append('userid', this.userid)
      this.$axios.post('/users/upload', data)
        .then(res => {
          if (res.data.code == 200) {
            alert('添加成功')
          }

        })
      console.log(file);
    },
    goto(){
      this.$router.push('/piclist')
    }
  },
  components: {
    myheader: myheader,
  },

  mounted() {
    this.get_info();
  },
};
</script>

<style scoped>
</style>
